<template>
  <div>
    <!-- 删除按钮 -->
    <div @dragover.prevent @drop="ondrop" class="clear-cart" @click="shop">
      <span id="bought" class="bought" v-if="bought.length !== 0">{{
        bought.length }}</span>
      <i class="el-icon-shopping-cart-1 ic "></i>
    </div>
    <slide-show :SlideShowList="SlideShowList"></slide-show>
    <div class="box">
      <!-- 人气推荐 -->
      <div class="recommend_box">
        <div class="recommend">
          <div>
            <span>人气推荐</span>
            <img src="http://www.ebeecake.com/dist/images/row_tit1.png" alt="">
          </div>
          <a href="">更多</a>
        </div>
        <div class="goods">
          <div v-for="(item, index) in recommend " :key="index">
            <goods :goods="item" @ondragstart="ondragstart"></goods>
          </div>
        </div>
      </div>
      <!-- 生日蛋糕 -->
      <div class="recommend_box">
        <div class="birthday">
          <div>
            <img src="@/assets/row_tit2.png" alt=""><span>生日蛋糕</span>
          </div>
          <a href="">更多</a>
        </div>
        <div class="goods">
          <div v-for="(item, index) in birthday " :key="index">
            <goods :goods="item" @ondragstart="ondragstart"></goods>
          </div>
        </div>
      </div>
      <!-- 咖啡下午茶 -->
      <div class="recommend_box">
        <div class="food">
          <div>
            <span>咖啡下午茶</span>
            <img src="http://www.ebeecake.com/dist/images/row_tit1.png" alt="">

          </div>
          <a href="">更多</a>
        </div>
        <div class="goods">
          <div v-for="(item, index) in food " :key="index">
            <goods :goods="item" @ondragstart="ondragstart"></goods>
          </div>
        </div>
      </div>
      <!--  瞬间-->
      <div class="recommend_box">
        <div class="time">
          <div>
            <span>瞬间</span>
            <img src="@/assets/row_tit2.png" alt="">
          </div>
          <a href="">更多</a>
        </div>
        <el-row>
          <el-col :span="12">
           <img src="@/assets/w_sj.jpg" alt="" srcset="" style="width: 99%;">
          </el-col>
          <el-col :span="12">
           <img src="@/assets/indexVideo.jpg" alt="" srcset="" style="width: 99%;"> 
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>

import { getproductSpecs, addShoppingCart, getBanner } from '@/api';
import SlideShow from '@/components/index/SlideShows.vue';
import goods from '@/components/index/goods.vue';
export default {
  name: 'KodaiMallhome',

  data () {
    return {
      recommend: [],
      birthday: [],
      food: [],
      SlideShowList: [],
      bought: [],
      shoppingCart: { product_id: '', pay_amount: '1', product_specs: '' }, //购物车，

    };
  },

  mounted () {
    getproductSpecs().then(res => {
      var data = res.data.data;
      console.log(data);
      this.recommend = filterByTypeId(data, '1');
      this.birthday = filterByTypeId(data, '2');
      this.food = filterByTypeId(data, '3');
    });
    function filterByTypeId (data, typeId) {
      return data.reduce((acc, item) => {
        if (item.type_id === typeId) {
          acc.push(item);
        }
        return acc;
      }, []);
    }
    getBanner().then(res => {
      this.SlideShowList = res.data.data
    })
  },

  methods: {
    shop () {
      this.$router.push({ path: '/shoppingCart' })
    },
    // 当用户开始拖拽一个元素或选中的文本时触发
    ondragstart (e, good) {
      e.dataTransfer.setData("myData", JSON.stringify(good));
    },
    // 当元素或选中的文本在可释放目标上被释放时触发，想要 ondrop 能正确触发，有时需要在前置 dragover 事件中禁用默认行为
    ondrop (e) {
      const data = JSON.parse(e.dataTransfer.getData("myData"));
      this.bought.push(data);
      this.shoppingCart.product_id = data.product_id
      this.shoppingCart.product_specs = { data_weight: data.product_specs1 + data.specs_name,product_price: data.out_price }
      var loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" })
      addShoppingCart(this.shoppingCart).then(res => {
        loading.close();
        if (res.data.code === 200) {
          this.showMessage.call(this, 'success', '加入购物车成功!');
        } else {
          this.showMessage.call(this, 'error', '加入购物车失败!' + res.data.msg);
        }
      }).catch(() => {
        this.showMessage.call(this, 'error', '加入购物车失败!');
      });
    },
  },
  components: {
    SlideShow, goods
  }
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}

.box {
  width: 85%;
  margin: 20px auto;
}

.recommend_box {
  margin-bottom: 20px;
}

.goods {
  display: flex;
}

.recommend,
.birthday,
.food,
.time {
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.recommend>div:first-child,
.birthday>div:first-child,
.food>div:first-child {
  width: 240px;
  height: 53px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.time>div:first-child {
  width: 150px;
  height: 53px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.recommend>div:first-child>span,
.birthday>div:first-child>span,
.food>div:first-child>span,
.time>div:first-child>span {
  font-size: 28px;
  color: #3C2314;
}

.recommend>a,
.birthday>a,
.food>a,
.time>a {
  display: inline-block;
  text-decoration: none;
  color: #3C2314;
  font-size: 20px;
}

.recommend>a:hover,
.birthday>a:hover,
.food>a:hover {
  color: #c8b49b;
}


// 删除按钮
.clear-cart {
  position: fixed;
  width: 60px;
  height: 60px;
  right: 8%;
  bottom: 10%;
  z-index: 9999;

}

.btn {
  width: 50px;
  height: 50px;
}

.bought {
  width: 20px;
  height: 20px;
  background: red;
  color: #fff;
  border-radius: 999px;
  position: absolute;
  right: 1px;
  top: -4px;
  font-size: 20px;
  transform: scale(0.7);
  text-align: center;
  line-height: 20px;
  pointer-events: none;
}

.ic {
  font-size: 25px;
  background: rgba(161, 161, 161, 0.6);
  color: white;
  padding: 1rem;
  border-radius: 50%;
}

.ic:hover {
  background: #d0cfcf;
}
</style>